<template>
    <vol-box
        :title="title"
        v-model="dialogVisible"
        :width="840"
        :draggable="true"
        :on-model-close="closeDialog"
    >
        <template #content>
            <div id="employmentInformation" class="font-color">
                <div class="horizontal-vertical-center">
                    <span class="font-weight">员工入职登记表</span>
                </div>
                <table border="1" cellspacing="0" cellpadding="0" style="width: 100%; text-align: center; margin-top: 20px;">
                    <tr>
                        <th :style="thWidth">姓名</th>
                        <td colspan="2">{{ rowData.name }}</td>
                        <th :style="thWidth">性别</th>
                        <td colspan="2">{{ rowData.gender }}</td>
                        <td rowspan="4" style="width: 150px;">
                            <img :src="localSrc" style="max-width: 100%;" />
                        </td>
                    </tr>
                    <tr>
                        <th :style="thWidth">民族</th>
                        <td colspan="2">{{ rowData.nation }}</td>
                        <th :style="thWidth">籍贯</th>
                        <td colspan="2">{{ rowData.nativePlace }}</td>
                    </tr>
                    <tr>
                        <th :style="thWidth">身份证号</th>
                        <td colspan="2">{{ rowData.idNumber }}</td>
                        <th :style="thWidth">出生日期</th>
                        <td colspan="2">{{ rowData.birthday }}</td>
                    </tr>
                    <tr>
                        <th :style="thWidth">学历</th>
                        <td colspan="2">{{ rowData.education }}</td>
                        <th :style="thWidth">审批状态</th>
                        <td colspan="2">{{ AuditStatus }}</td>
                    </tr>
                    <tr>
                        <th :style="thWidth">政治面貌</th>
                        <td colspan="3"></td>
                        <th :style="thWidth">户口所在地</th>
                        <td colspan="3"></td>
                    </tr>
                    <tr>
                        <th :style="thWidth">家庭住址</th>
                        <td colspan="3"></td>
                        <th :style="thWidth">家庭电话</th>
                        <td colspan="3"></td>
                    </tr>
                    <tr>
                        <th :style="thWidth">任职部门</th>
                        <td></td>
                        <th :style="thWidth">职务</th>
                        <td colspan="2"></td>
                        <th :style="thWidth">职称</th>
                        <td></td>
                    </tr>
                    <tr>
                        <th :style="thWidth">参加工作时间</th>
                        <td colspan="3"></td>
                        <th :style="thWidth">入职时间</th>
                        <td colspan="3"></td>
                    </tr>
                    <tr>
                        <th :style="thWidth">毕业院校</th>
                        <td></td>
                        <th :style="thWidth">专业</th>
                        <td colspan="2"></td>
                        <th :style="thWidth">学年</th>
                        <td></td>
                    </tr>
                    <tr>
                        <th :style="thWidth">外语语种</th>
                        <td colspan="3"></td>
                        <th :style="thWidth">计算机等级</th>
                        <td colspan="3"></td>
                    </tr>
                    <tr>
                        <th :style="thWidth" rowspan="2">教育经历</th>
                        <th>时间</th>
                        <th colspan="2">学校名称</th>
                        <th>专业</th>
                        <th colspan="2">证书情况</th>
                    </tr>
                    <tr>
                        <td :style="thWidth" style="height: 30px;"></td>
                        <td :style="thWidth" style="height: 30px;" colspan="2"></td>
                        <td :style="thWidth" style="height: 30px;"></td>
                        <td :style="thWidth" style="height: 30px;" colspan="2"></td>
                    </tr>
                    <tr>
                        <th :style="thWidth" rowspan="4">工作经历</th>
                        <th>工作时间</th>
                        <th colspan="2">工作单位</th>
                        <th>职位</th>
                        <th colspan="2">离职原因</th>
                    </tr>
                    <tr>
                        <td :style="thWidth" style="height: 30px;"></td>
                        <td :style="thWidth" style="height: 30px;" colspan="2"></td>
                        <td :style="thWidth" style="height: 30px;"></td>
                        <td :style="thWidth" style="height: 30px;" colspan="2"></td>
                    </tr>
                    <tr>
                        <td :style="thWidth" style="height: 30px;"></td>
                        <td :style="thWidth" style="height: 30px;" colspan="2"></td>
                        <td :style="thWidth" style="height: 30px;"></td>
                        <td :style="thWidth" style="height: 30px;" colspan="2"></td>
                    </tr>
                    <tr>
                        <td :style="thWidth" style="height: 30px;"></td>
                        <td :style="thWidth" style="height: 30px;" colspan="2"></td>
                        <td :style="thWidth" style="height: 30px;"></td>
                        <td :style="thWidth" style="height: 30px;" colspan="2"></td>
                    </tr>
                    <tr>
                        <th :style="thWidth">紧急联络人</th>
                        <td colspan="3"></td>
                        <th :style="thWidth">紧急电话</th>
                        <td colspan="3"></td>
                    </tr>
                    <tr style="height: 60px;">
                        <th :style="thWidth">人事部意见</th>
                        <td colspan="3"></td>
                        <th :style="thWidth">用人部意见</th>
                        <td colspan="3"></td>
                    </tr>
                    <tr>
                        <th :style="thWidth">主管签字</th>
                        <td colspan="3"></td>
                        <th :style="thWidth">日期时间</th>
                        <td colspan="3"></td>
                    </tr>
                </table>
            </div>
        </template>
        <template #footer>
            <div>
                <el-button
                    @click="closeDialog"
                >
                    关闭
                </el-button>
                <el-button
                    type="primary"
                    v-print="{id:'employmentInformation'}"
                >
                    打印
                </el-button>
            </div>
        </template>
    </vol-box>
</template>
  
<script setup>
import { ref, computed } from 'vue'
import VolBox from '@/components/basic/VolBox.vue'

// 变量
const title = ref('入职信息详情')
const dialogVisible = ref(false)
const rowData = ref(null)
const thWidth = ref({
    width: '110px',
    height: '20px'
})

// 计算属性
const AuditStatus = computed(() => {
    let reValue = ''
    switch (rowData.value.AuditStatus) {
        case 0:
            reValue = '待审核'
            break
        case 1:
            reValue = '审核通过'
            break
        case 2:
            reValue = '审核中'
            break
        case 3:
            reValue = '审核未通过'
            break
        case 4:
            reValue = '驳回'
            break
    }
    return reValue
})

const localSrc = computed(() => {
    return `http://127.0.0.1:9991/${rowData.value.img}`
})

// 函数
defineExpose(
    {
        open
    }
)

function open(row) {
    rowData.value = row
    dialogVisible.value = true
}

function closeDialog() {
    dialogVisible.value = false
}
</script>
  
<style lang="less" scoped>
.font-color {
    color: black;
}

.horizontal-vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.font-weight {
    font-weight: bold;
}
</style>
  